<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ul>
<button id="test">test</button>
<div id="content">aaaaaaa</div>

<script> /* script宏任务 => 它不进入宏队列  */

  setTimeout(() => {// 宏任务
    alert('timeout1')  // 页面渲染了吗?
  }, 0)

  Promise.resolve().then(() => { // 微任务
    alert('promise1') // 页面渲染了吗?
  }) 
  Promise.resolve().then(() => { // 微任务
    alert('promise2') // 页面渲染了吗?
  }) 

  document.getElementById('test').onclick = () => { // 宏任务

    document.getElementById('content').innerHTML = 'xxxx'  // 更新DOM

    setTimeout(() => { // 宏任务  
      document.getElementById('content').innerHTML = 'zzzz'
      alert('timout2') // 页面更新渲染了吗?
    }, 0)

    Promise.resolve().then(() => { // 微任务
      document.getElementById('content').innerHTML = 'yyyy'
      alert('promise3') // 页面更新渲染了吗?
    }) 
    alert('click')
  }
  
  alert('1111') // 页面渲染了吗?  


  /* 
  Promise是后面ES6才出来, 才有了微任务, 以前只有宏任务
  一个宏任务 => 渲染页面 => 一个宏任务 => 渲染页面

  click回调中先更新了DOM, 后又需要异步(定时器)更新DOM
      一个宏任务 => 渲染页面 => 一个宏任务 => 渲染页面
  click回调中先更新了DOM, 后又需要异步(Promise)更新DOM
      一个宏任务(更新DOM) => 微任务(DOM) => 渲染页面

  微任务的效率高: 微任务能赶在下一次页面渲染前执行, 不会导致新的渲染(而宏任务会导致新的渲染)
  */

</script>
</body>
</html>